<template>
    <el-row>
        <el-card class="box-card" shadow="hover">
            <div class="text item">
                <el-form :model="searchForm" ref="searchForm" label-width="100px"
                         class="demo-dynamic">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item>
                                <div slot="label">
                                    <span class="label-item">服务类型</span>&nbsp;&nbsp;&nbsp;
                                </div>
                                <el-select v-model="searchForm.serviceType" placeholder="请选择服务类型">
                                    <el-option
                                        v-for="item in serviceTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item>
                                <div slot="label">
                                    <span class="label-item">下单时间</span>&nbsp;&nbsp;&nbsp;
                                </div>
                                <el-date-picker
                                    v-model="searchForm.orderTime"
                                    type="datetime"
                                    placeholder="选择下单时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <div slot="label">
                                    <span class="label-item">验货日期</span>&nbsp;&nbsp;&nbsp;
                                </div>
                                <el-date-picker
                                    v-model="searchForm.time"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="a">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item>
                                <div slot="label">
                                    <span class="label-item">订单号</span>&nbsp;&nbsp;&nbsp;
                                </div>
                                <el-input v-model="searchForm.number" style="width:170px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <div slot="label">
                                    <span class="label-item">产品名称</span>&nbsp;&nbsp;&nbsp;
                                </div>
                                <el-input v-model="searchForm.name" style="width:220px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="success" @click="search">查询</el-button>
                        </el-col>

                    </el-row>
                </el-form>
            </div>

        </el-card>

    </el-row>
</template>

<script>
    export default {
        name: "orderList",
        data() {
            return {
                searchForm: {
                    serviceType: '',
                    orderTime: '',
                    time: '',
                    number: '',
                    name: '',

                },
                serviceTypes: [],


            }
        },
        created() {

        },
        methods: {

            search() {
                alert("查询");
            },
            a() {
                console.log(this.searchForm.time)
            }
        },

    }
</script>

<style scoped>
    .label-item {
        color: #3560a5;
    }
</style>
